import React, { useState, useEffect, useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { TabBar } from 'antd-mobile';
import { parse } from 'query-string';
import ChatList from '../../page/Chat/ChatList';
import ConcatList from '../../page/MailList/List';
import UserInfo from '../Mine/MyInfo';
import { observer } from "mobx-react-lite";
import VConsole from 'vconsole';
import { CommentOutlined, TeamOutlined, UserOutlined } from '@ant-design/icons';

import { MySdkStoreContext } from "../../context";
import { NEW_APPLICATION_STORAGE_KEY } from '../../constants';

import './index.scss';

export const Page = observer(() => {
  const [selectedTab, setSelectedTab] = useState('/');
  const mySdkStore = useContext(MySdkStoreContext);
  const history = useHistory();
  const [hasNewFriend, setHasNewFriend] = useState(false);
  const [hasNewGroupMember, setHasNewGroupMember] = useState(false);

  useEffect(() => {
    const { pathname } = history.location;
    setSelectedTab(pathname);
  }, []);

  useEffect(() => {
    mySdkStore.sdk.onNewFriendRequest = () => {
      setHasNewFriend(true);

      const hasReadNewApplicationStr = localStorage.getItem(NEW_APPLICATION_STORAGE_KEY);
      let newApplicationObj = { hasReadNewFriendApplication: false };
      if (hasReadNewApplicationStr) {
        try {
          const hasReadNewApplicationObj = JSON.parse(hasReadNewApplicationStr);
          newApplicationObj = {...hasReadNewApplicationObj, hasReadNewFriendApplication: false };
        } catch {}
      }
      localStorage.setItem(NEW_APPLICATION_STORAGE_KEY, JSON.stringify(newApplicationObj));
    };

    mySdkStore.sdk.onNewJoinGroupApply = () => {
      setHasNewGroupMember(true);

      const hasReadNewApplicationStr = localStorage.getItem(NEW_APPLICATION_STORAGE_KEY);
      let newApplicationObj = { hasReadNewGroupMemberApplication: false };
      if (hasReadNewApplicationStr) {
        try {
          const hasReadNewApplicationObj = JSON.parse(hasReadNewApplicationStr);
          newApplicationObj = {...hasReadNewApplicationObj, hasReadNewGroupMemberApplication: false };
        } catch {}
      }
      localStorage.setItem(NEW_APPLICATION_STORAGE_KEY, JSON.stringify(newApplicationObj));
    }
  }, []);

  useEffect(() => {
    const hash = window.location.hash;
    const { debug } = parse(hash ? hash.split('?')[1] : '');
    if(debug) {
      new VConsole({ maxLogNumber: 1000 });
    }
  }, []);

  const handelTabChange = (key) => {
    history.push({ pathName: key });
    setSelectedTab(key);
  }

  return (
    <div className='chatContent'>
      <div className="chatContentBody">
        {selectedTab === '/' && <ChatList /> }
        {selectedTab === '/mailList' &&  <ConcatList hasNewFriend={hasNewFriend} hasNewGroupMember={hasNewGroupMember} /> }
        {selectedTab === '/aboutMe' && <UserInfo /> }
      </div>
      <div className="chatContentBottom">
        <TabBar activeKey={selectedTab} onChange={handelTabChange}>
          <TabBar.Item
            title="消息"
            key="/"
            icon={<CommentOutlined />}
            // badge={Badge.dot}
          >
          </TabBar.Item>
          <TabBar.Item
            title="通讯录"
            key="/mailList"
            icon={<TeamOutlined />}
            badge={hasNewFriend ? 1 : null}
          >
          </TabBar.Item>
          <TabBar.Item
            title="我的"
            key="/aboutMe"
            icon={<UserOutlined />}
          >
          </TabBar.Item>
        </TabBar>
      </div>
    </div>
  );
});

export default Page;
